<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>返回</v-ons-back-button>
      </div>
      <div class="center">消息管理</div>
    </v-ons-toolbar>
    <div class="container">
      <v-ons-pull-hook
        class="pull-hook"
        :action="loadItem"
        @changestate="state = $event.state"
      >
        <span v-show="state === 'initial'"> 下拉刷新  </span>
        <span v-show="state === 'preaction'"> 释放 </span>
        <span v-show="state === 'action'"> 加载中... </span>
      </v-ons-pull-hook>

      <!-- 数据列表 -->
      <div class="data-list">
        <div class="data-item">
          <p>订单状态</p>
          <p>2018-1-1 12:12:12</p>
        </div>
        <div class="data-item">
          <p>订单状态</p>
          <p>2018-1-1 12:12:12</p>
        </div>
        <div class="data-item">
          <p>订单状态</p>
          <p>2018-1-1 12:12:12</p>
        </div>
      </div>
    </div>

  </v-ons-page>
</template>

<script>
    export default {
      data() {
        return {
          state: 'initial',
        };
      },
      methods: {
        loadItem(done) {
          setTimeout(() => {
            console.log('加载')
            done();
          }, 600);
        },
        enterPage({path:path,actionSheet:actionSheet}){
          if(actionSheet){
            this.actionSheetVisible = false
          }
          this.$router.push({
            path:path
          });
        }
      }
    }
</script>

<style scoped lang="less">
  @import "../../assets/less/consumer/message-management.less";
</style>
